<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

<ui:composition>
	<f:view>
		<h:form>

			<h:panelGrid columns="2">
				<h:outputLabel value="Enter User Name"></h:outputLabel>
				<h:inputText value="#{userAction.user.userName}"></h:inputText>
			</h:panelGrid>

			<h:panelGrid columns="2">
				<a4j:commandButton value="add User" reRender="infoBlock"
					oncomplete="#{rich:component('infoBlockPanel')}.show()" />
				<h:commandButton action="#{userAction.searchUser}"
					value="Search User"></h:commandButton>
			</h:panelGrid>
		</h:form>


		<h:form>
			<rich:modalPanel id="infoBlockPanel">
				<h:panelGrid id="infoBlock">
					<h:panelGrid columns="2">
						<h:outputLabel value="Enter User Id"></h:outputLabel>
						<h:inputText value="#{userAction.user.userId}"></h:inputText>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<h:outputLabel value="Enter User Name"></h:outputLabel>
						<h:inputText value="#{userAction.user.userName}"></h:inputText>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<h:outputLabel value="Enter Password"></h:outputLabel>
						<h:inputText value="#{userAction.user.password}"></h:inputText>
					</h:panelGrid>

					<h:panelGrid columns="2">
						<a href="#"
							onclick="#{rich:component('infoBlockPanel')}.hide();return false">Close
						window</a>
						<a4j:commandButton reRender="userListPanel" action="#{userAction.addUser}"
							oncomplete="#{rich:component('infoBlockPanel')}.hide();return false"
							value="Add User"></a4j:commandButton>
					</h:panelGrid>

				</h:panelGrid>
			</rich:modalPanel>
		</h:form>


		<rich:panel id="userListPanel">
			<rich:dataTable value="#{userAction.users}" var="user">

				<f:facet name="header">
					<rich:columnGroup>
						<rich:column colspan="4">
							<h:outputText value="User Records " />
						</rich:column>
						<rich:column breakBefore="true">
							<h:outputText value="User ID " />
						</rich:column>
						<rich:column>
							<h:outputText value="User Name " />
						</rich:column>
						<rich:column>
							<h:outputText value="User Passwod " />
						</rich:column>
						<rich:column>
							<h:outputText value="Edit Users " />
						</rich:column>
					</rich:columnGroup>
				</f:facet>

				<rich:column>
					<h:outputText value="#{user.userId}"></h:outputText>
				</rich:column>
				<rich:column>
					<h:inputText value="#{user.userName}"></h:inputText>
				</rich:column>
				<rich:column>
					<h:outputText value="#{user.password}"></h:outputText>
				</rich:column>
				<rich:column>
					<a4j:commandButton value="Edit"
						oncomplete="#{rich:component('useredit')}.show()"
						reRender="userinfo">
						<f:setPropertyActionListener value="#{user}"
							target="#{userAction.user}"></f:setPropertyActionListener>
					</a4j:commandButton>
				</rich:column>

			</rich:dataTable>

		</rich:panel>


		<rich:modalPanel id="useredit">
			<h:form>
				<h:panelGrid id="userinfo">
					<h:panelGrid columns="2">
						<h:outputLabel value="Enter User ID"></h:outputLabel>
						<h:inputText value="#{userAction.user.userId}"></h:inputText>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<h:outputLabel value="Enter User Name"></h:outputLabel>
						<h:inputText value="#{userAction.user.userName}"></h:inputText>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<h:outputLabel value="Enter Passwod"></h:outputLabel>
						<h:inputText value="#{userAction.user.password}"></h:inputText>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<a href="#"
							onclick="#{rich:component('useredit')}.hide();return false">Close
						window</a>
						<a4j:commandButton action="#{userAction.editUser}"
							value="Add User"></a4j:commandButton>
					</h:panelGrid>
				</h:panelGrid>
			</h:form>
		</rich:modalPanel>


	</f:view>
</ui:composition>


</html>